<template>
  <view>
    <!-- 1 搜索框 -->
    <UgoSerach></UgoSerach>

    <!-- 2 tabs -->
    <u-tabs
      active-color="#eb4450"
      :bar-width="180"
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>

    <!-- 3 tabs内容 条件渲染 -->
    <view class="tab-content">
      <view
        v-for="(item ,index) in  list"
        :key="item.name"
        class="tabs-item"
      >
        <block v-if="current===index">
          <navigator
            v-for="item1 in goodsList"
            :key="item1.goods_id"
            class="goods-item u-p-10"
            :url="'/pages/goods_detail/goods_detail?goods_id='+item1.goods_id"
          >
            <u-row>
              <u-col span="4">
                <view class="u-flex u-row-center">
                  <u-image
                    width="191rpx"
                    height="191rpx"
                    :src="item1.goods_small_logo"
                  ></u-image>
                </view>
              </u-col>
              <u-col span="8">
                <view
                  style="height:191rpx"
                  class="u-flex-col u-row-around"
                >
                  <view class="goods-name">{{item1.goods_name}}</view>
                  <view class="goods-price">￥{{item1.goods_price}}</view>
                </view>
              </u-col>
            </u-row>
            <u-line
              class="u-p-10"
              color="#eee"
            />
          </navigator>
          
        </block>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      goodsList:[],
      total: 0,
    };
  },
  onLoad({cid}) {
    //   cid = cid || 6
    //   console.log(cid);

      // 定义全局变量  存放接口参数
    this.params = {
      // 否	string	关键字
      query: "",
      // 否	string	分类id
      cid: cid || 6,
      // 否	number	页码
      pagenum: 1,
      // 否	number	页容量
      pagesize: 10,
    };
      this.getGoodsList()
  },
    // 上拉加载
    onReachBottom(){
        if(this.goodsList.length>=this.total){
            uni.showToast({
                title:'没有更多了',
                icon: 'none'
            })
        }else{
            this.params.pagenum++;
            this.getGoodsList()
        }
    },
    // 下拉刷新
    async onPullDownRefresh(){
        // 清空数组
        this.goodsList=[]
        // 页码回到第一页
        this.params.pagenum = 1
        // 重新调用获取商品列表数据
        await this.getGoodsList()
        // 数据回来 关闭刷新效果
        uni.stopPullDownRefresh()
    },
  methods: {
    change(index) {
      this.current = index;
    },
    async getGoodsList(){
        const res = await this.$u.http.get("/goods/search",this.params)
        // this.goodsList = res.goods     
        // 合并数组
        this.goodsList = [...this.goodsList,...res.goods]
         // 给total赋值
        this.total = res.total
    },
  },
};
</script>

<style lang="scss">
.goods-name{
    color: "#666"
}
.goods-price{
    color: $themeColor;
}
</style>